<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>百度</div>
    <ul class="nav">
        <li>我的首页</li>
        <li>产品介绍</li>
        <li>联系我们</li>
    </ul>
    <script>
        //1- 通过JS获取到HTML标签
        // 只能获取第一个元素
        // document.querySelector('css选择器')
        const div = document.querySelector('div')
        console.log(div);
        
        //2-获取多个元素
        // 获取的是一个'伪数组',有下标,但不具备真正数组的功能
        const nav = document.querySelectorAll('li')
        console.log(nav[0]);
        console.log(nav[1]);
        console.log(nav[2]);

        // 3-不常用获取元素写法
        console.log(document.getElementById('box'));
        console.log(document.getElementsByTagName('li'));
        console.log(document.getElementsByClassName('w'));


        // 4-获取元素的其他方法(id选择器)
        const box = document.querySelector('#box')
        console.log(box);
        console.log(box.innerText);
        box.innerText = 'js'
        box.innerText = '<strong>js</strong>'
        console.log(box.innerHTML);
        box.innerHTML = '<strong>js</strong>'


    </script>
</body>
</html>